<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<div id="fb-root"></div>
<div id="ajax-spinner"></div>
<script src="/resources/js/jquery-1.11.0.js"></script>
<script src="/resources/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/resources/js/jquery.ui.touch-punch.min.js"></script>
<script src="/resources/js/bootstrap.js"></script>
<script src="/resources/js/kakao.min.js"></script>
<script src="/resources/js/jquery.autosize.min.js"></script>
<script src="/resources/js/spin.min.js"></script>
<script type="text/javascript" src="/resources/js/mention.js"></script>
<script type="text/javascript" src="/resources/js/bootstrap-typeahead.js"></script>
<script type="text/javascript" src="/resources/js/nprogress.js"></script>
<script type="text/javascript" src="/resources/js/parseEmoji.js"></script>
<script type="text/javascript" src="/resources/js/jquery.emojiarea.js"></script>
<script type="text/javascript" src="/resources/js/emojis.js"></script>
<script type="text/javascript" src="/resources/js/icheck.min.js"></script>
<script type="text/javascript" src="/resources/js/bootstrap-select.min.js"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-55543645-1', 'auto');
  ga('send', 'pageview');
</script>
<script type="text/javascript">
	var userIdx = "${userDto.idx}";
	var userGender = "${userDto.gender}";
	var noti_index = 0;
	var opts = {
      lines: 11, // The number of lines to draw
      length: 5, // The length of each line
      width: 2, // The line thickness
      radius: 7, // The radius of the inner circle
      corners: 1, // Corner roundness (0..1)
      rotate: 0, // The rotation offset
      direction: 1, // 1: clockwise, -1: counterclockwise
      color: '#fff', // #rgb or #rrggbb
      speed: 0.8, // Rounds per second
      trail: 85, // Afterglow percentage
      shadow: false, // Whether to render a shadow
      hwaccel: false, // Whether to use hardware acceleration
      zIndex: 2e9, // The z-index (defaults to 2000000000)
      className: "ajax-loader",
      top: '50%', // Top position relative to parent in px
      left: '50%' // Left position relative to parent in px
    };
	var target = document.getElementById('ajax-spinner');
	var ajax_spin = new Spinner(opts).spin(target);
	
  	$(function(){
  		/* $(".modal").on("show.bs.modal", function () {
  			$("#page").css("transform", "inherit");
  		}).on("hide.bs.modal", function () {
  			$("#page").css("transform", "translateX(0)");
  		}); */
  		
  		$('#login-dialog').on('hidden.bs.modal', function () {
  	  		$("#modal-login").show();
  	  		$("#modal-recovery").hide();
  		});
  		
  		$("#toproot-menu").find("li").each(function(){
  			if($(this).data("category") == window.location.pathname.replace("/","")){
  				$(this).addClass("active");
  			}
  		});
  		$("#mobile-menu").click(function(){
  			$("body").addClass("side_on");
  			$("#mobileBackdrop").addClass("side_on");
  			
  			/* $("#mobile-nav").show(0).addClass("slide");
  			var h = $("#mobile-nav").height()+"px";
  			$("#viewport").css({"height":h,"max-height":h,"overflow":"hidden"});
  			$("body").addClass("side-open"); */
  			
  			//$("#page").addClass("side");
  			//$(".mobile-footer-menu").css("left","250px");
  			//$("body").addClass("modal-open");
  			/* setTimeout(function(){
  				$("#mobile-backdrop").show(0);
  			},300); */
  			try{
  				loading = false;
  			}catch(e){}
  		});
  		$("#mobileBackdrop").click(function(e){
  			if( e.target !== this ) return;
  			$("#mobileBackdrop").removeClass("side_on");
  			$("body").removeClass("side_on");
  			/* $("#mobile-nav").removeClass("slide");
  			$("#mobile-backdrop").hide(0);
  			$("#viewport").css({"height":"100%","max-height":"100%","overflow":"visible"});
  			$("body").removeClass("side-open"); */
  			//$("#mobile-backdrop").hide();
  			//$("#page").removeClass("side");
  			//$(".mobile-footer-menu").css("left","0");
  			//$("body").removeClass("modal-open");
  			try{
  				loading = true;
  			}catch(e){}
  		});
  		
		$("#q").parent().click(function(){
			$(this).addClass("q-focus");
			$("#q").fadeIn().focus();
		});
		$("#q").focus(function(){
			$(this).parent().addClass("q-focus");
		}).focusout(function(){
			if($(this).val().length == 0){
				$("#q").fadeOut();
				$(this).parent().removeClass("q-focus");
			}
		});
		$('input').iCheck({
			checkboxClass: 'icheckbox_square-blue',
			radioClass: 'iradio_square-blue'
		});
  	});
  	
  	function mobileNavHide(){
  		$("#mobileBackdrop").removeClass("side_on");
		$("body").removeClass("side_on");
		try{
			loading = true;
		}catch(e){}
  	}
  	
  	function toggleMobileSearchButton(){
  		if($("#mobileSearchForm").hasClass("open") == true){
  			$("#mobileSearchForm").removeClass("open");
  		}else{
  			$("#mobileSearchForm").addClass("open");
  		}
  	}
  	
  	function categoryOpen(obj){
  		if($(obj).next().hasClass("hide")){
  			$(obj).children("i").eq(1).removeClass("ion-ios-arrow-down").addClass("ion-ios-arrow-up");
  			$(obj).next().show().removeClass("hide").addClass("open");
  		}else{
  			$(obj).children("i").eq(1).removeClass("ion-ios-arrow-up").addClass("ion-ios-arrow-down");
  			$(obj).next().hide().removeClass("open").addClass("hide");
  		}
  	}
  	
  	function alertShow(type, message, dealy){
		var $el = $("<div class='alert alert-"+type+"'><button type='button' onclick='alertHide(this)' class='close'>×</button>"+message+"</div>");
		$("body").append($el);
		if(dealy != null){
			setTimeout(function(){$el.addClass("in");},100);
			setTimeout(function(){$el.removeClass("in");setTimeout(function(){$el.remove();},300);}, dealy);
		}else{
			setTimeout(function(){$el.addClass("in");},100);
		}
	}
	function alertHide(el){
		var $el = $(el).parent();
		$el.removeClass("in");
		setTimeout(function(){$el.remove();},300);
	}
	
  	Kakao.init('c5f8d437c21941d011d7e542f02b91dc');
  	function loginWithKakao(obj) {
        Kakao.Auth.login({
        	success: function(authObj) {
        		Kakao.API.request({
        	        url: '/v1/user/me',
        	        success: function(res) {
        	        	var data = 'kakao-idx='+res.id+'&kakao-nickname='+res.properties.nickname+'&kakao-profile_image='+res.properties.profile_image;
        	        	$.ajax({
	                		type : "POST"
	            		    , url : "/kakaoLogin"
	            		    , data : data
	            		    , dataType : "text"
	            		    , timeout : 5000
	            		    , error : function(request, status, error) {
	            		    	alertShow("danger","서버문제로 로그인할 수 없습니다", 2000);
	            		    }
	            		    , success : function(response) {
	            		    	if(response == "login"){
	            		    		document.location.reload();
	            		    	}else if(response == "sign"){
	            		    		location.href= '/start_guide';
	            		    	}else{
	            		    		alertShow("danger","로그인할 수 없습니다", 2000);
	            		    	}
	            		    }
	            		    , beforeSend: function() {
	            		    	$(obj).html("연결중...").attr("disabled","disabled");
	            		    }
	            		    , complete: function() {
	            		    	$(obj).html("카카오 로그인").removeAttr("disabled");
	            		    }
	            		});
        	        }
        	    });
        	}
        });
	};
  	
  	/* 페이스북 로그인 */
  	function fb_login(obj){
  		FB.login(function(response) {
  			if (response.status === 'connected') {
            	FB.api('/me', function(user) {
	                if (user) {
	                	var data = 'fb_name='+user.name+'&fb_id='+user.id+'&fb_email='+user.email+'&fb_gender='+user.gender;
	                	$.ajax({
	                		type : "POST"
	            		    , url : "/fb_getMember"
	            		    , data : data
	            		    , dataType : "text"
	            		    , timeout : 5000
	            		    , error : function(request, status, error) {
	            		    	alertShow("danger","서버문제로 로그인할 수 없습니다", 2000);
	            		    }
	            		    , success : function(response) {
	            		    	if(response == "login"){
	            		    		document.location.reload();
	            		    	}else if(response == "sign"){
	            		    		location.href= '/start_guide';
	            		    	}else{
	            		    		alertShow("danger","로그인할 수 없습니다", 2000);
	            		    	}
	            		    }
	            		    , beforeSend: function() {
	            		    	$(obj).html("연결중...").attr("disabled","disabled");
	            		    }
	            		    , complete: function() {
	            		    	$(obj).html("페이스북 로그인").removeAttr("disabled");
	            		    }
	            		});
	                }else{
	                	alertShow("warning","페이스북 로그인에 실패했습니다", 2000);
	                }
            	});
            }else if (response.status === 'not_authorized') {
            	alertShow("warning","페이스북 로그인에 실패했습니다", 2000);
            }else{
            	alertShow("warning","페이스북 로그인에 실패했습니다", 2000);
            }
  		}, {scope: 'email'});
  	}
  	
  	/* 로그인 */
  	function login(){
		var data = $("#login-form").serialize();
		
		if($("#loginUser").val() == ""){
			alert('아이디 또는 이메일을 입력해 주세요');
			return false;
		}
		if($("#loginPassword").val() == ""){
			alert('비밀번호를 입력해 주세요');
			return false;
		}
		
		$.ajax({
		    type : "POST"
		    , url : "/login"
		    , data : data
		    , dataType : "text"
		    , timeout : 5000
		    , error : function(request, status, error) {
		    	alert("서버문제로 로그인을 할 수 없습니다");
		    }
		    , success : function(response) {
		    	if(response == "true"){
		    		document.location.reload();
		    	}else{
		    		alertShow("danger","사용자 정보가 올바르지 않습니다", 2000);
		    	}
		    }
		    , beforeSend: function() {
		    	$("#loginBtn").html("<img src='/resources/img/primary-btn-loading.gif'>");
		    }
		    , complete: function() {
		    	$("#loginBtn").html("로그인");
		    }
		});
		
	}
  	
  	/* 비밀번호 찾기 */
  	function recovery(){
  		$("#modal-login").hide('slide',{'direction':'up'},500,function(){
  			$("#modal-recovery").fadeIn();
  			$("#recovery-step").show();
  			$("#recovery-execute").hide();
  		});
  	}
  	
  	function recoveryPasswd(obj){
  		$.ajax({
		    type : "POST"
		    , url : "/recoveryPasswd?email="+$("#InputRecoveryEmail").val()
		    , dataType : "text"
		    , timeout : 5000
		    , error : function(request, status, error) {
		    	alertShow("danger","다시 시도해주세요", 2000);
		    	$(obj).html("전송").removeAttr("disabled","disabled");
		    }
		    , success : function(response) {
		    	if(response == "execute"){
		    		$("#recovery-step").hide();
		    		$(".recovery-execute-message").html("<p><strong>"+$("#InputRecoveryEmail").val()+"</strong> 이메일로 비밀번호 찾기 URL주소를 전송하였습니다.<br>이메일을 확인해 주세요</p>");
		    		$("#recovery-execute").show();
		    	}else{
		    		alertShow("danger","등록되지 않은 이메일입니다", 2000);
		    	}
		    }
		    , beforeSend: function() {
		    	$(obj).html("전송중..").attr("disabled","disabled");
		    }
		    , complete: function() {
		    	$(obj).html("전송").removeAttr("disabled","disabled");
		    }
		});
  	}
 	
  	/* 로그아웃 */
  	function logout(){
  		var loginApp = "${userDto.loginApp}";
  		
  		if(loginApp == "fb"){
  			location.href = "/logout";
  			/* FB.logout(function(response) {
  				location.href = "/logout";
  			}); */
  		}else{
  			location.href = "/logout";
  		}
  	}
  	
  	function isMobile(){
  		var filter = "win16|win32|win64|mac|macintel";
   		if(navigator.platform){
   		    if(filter.indexOf(navigator.platform.toLowerCase())<0){
   		    	return true;
   		    }else{
   		    	return false;
   		    }
   		}else{
   			return false;
   		}
  	}
  	
  	function timeleft(time){
		var startDate = new Date(time.substring(0,4),time.substring(5,7),time.substring(8,10),time.substring(11,13),time.substring(14,16),00);
		var dt = new Date();
		var endDate  = new Date(dt.getFullYear(),dt.getMonth()+1 ,dt.getDate() ,dt.getHours() ,dt.getMinutes() ,00);
		var time_left = (endDate.getTime() - startDate.getTime()) / 60000;
		var time = 1000*60*60*24;
		if(time_left == 0){
			time_left = "<spring:message code='post.time.now' javaScriptEscape='true'/>";
		}else if(time_left < 60){
			time_left += "<spring:message code='post.time.mins' javaScriptEscape='true'/>";
		}else if(time_left < 1440){
			time_left = parseInt(time_left/60)+"<spring:message code='post.time.hours' javaScriptEscape='true'/>";
		}else if(time_left > 1440){
			var e_day = parseInt((endDate.getTime() - startDate.getTime()) / time);
			time_left = e_day+"<spring:message code='post.time.days' javaScriptEscape='true'/>";
 			if(e_day > 29){
 				var e_month = parseInt((endDate.getTime() - startDate.getTime()) / (time*30));
 				time_left = e_month+"<spring:message code='post.time.months' javaScriptEscape='true'/>";
 			}
 			if(e_month > 11){
 				time_left = parseInt((endDate.getTime() - startDate.getTime()) / (time*30*12))+"<spring:message code='post.time.years' javaScriptEscape='true'/>";
 			}
		}
		return time_left;
  	}
  	
  	String.prototype.parseTagUser = function() {
		hashpattern = /(@[A-Za-z0-9-_]+)/g;
		return this.match(hashpattern);
	};
	
  	function twitterCall(response){
  		if(response == "sign"){
  			location.href= "/start_guide";
  		}else{
  			document.location.reload();
  		}
  	}
  	
  	function instagramCall(response){
  		if(response == "sign"){
  			location.href= "/start_guide";
  		}else{
  			document.location.reload();
  		}
  	}
  	
 	/* 페이스북 SDK 초기화 */ 
	window.fbAsyncInit = function() {
		FB.init({appId: '1427921877464450', status: true, cookie: true,xfbml: true});
    };
    
	(function(d){
	     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
	     if (d.getElementById(id)) return;
	     js = d.createElement('script'); js.id = id; js.async = true;
	     js.src = "//connect.facebook.net/ko_KR/all.js";
	     ref.parentNode.insertBefore(js, ref);
	}(document));
	
	$(document).ajaxStart(function() {
		NProgress.start();
	});
	$(document).ajaxComplete(function() {
		NProgress.done();
	});
	
	String.prototype.parseUsername = function() {
		return this.replace(/[@]+[A-Za-z0-9-_]+/g, function(u) {
			var link = "<a href='/"+u.replace("@","")+"' class='userLink' target='_blank'>"+u+"</a>";
			return link;
		});
	};
	String.prototype.parseURL = function() {
		return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.=]+/g, function(u) {
			return "<a href='"+u+"' class='urlLink' target='_blank'>"+u+"</a>";
		});
	};
	
	$(window).scroll(function(){
		if($(window).innerWidth() > 1300){
			var scrollTop = $(window).scrollTop()+$(window).height()-200;
	   		if($(window).height() < scrollTop){
	   			$("#scrollTop").addClass("in");
	   		}else{
	   			$("#scrollTop").removeClass("in");
	   		}
		}
   	});
	
	function parseContent(content){
		return content.replace(/[@]+[A-Za-z0-9-_]+/g, function(u) {
			var link = "<a href='/"+u.replace("@","")+"' class='userLink' target='_blank'>"+u+"</a>";
			return link;
		}).replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.=]+/g, function(u) {
			return "<a href='"+u+"' class='urlLink' target='_blank'>"+u+"</a>";
		}).replace(/[#]+[A-Za-z0-9가-힣_]+/g, function(t) {
			return "<a href='/hashtag/"+t.substr(1)+"' class='hashtag' target='_blank'>"+t+"</a>";
		});
	}
	function shareParse(content){
		if(content != null){
			return content.replace(/[\r|\n]/g, ' ').replace(/'/g, "%47").replace(/"/g,"%42");
		}
	}
</script>
<c:if test="${userDto ne null}">
<link rel="stylesheet" href="/resources/css/select2.css">
<link rel="stylesheet" href="/resources/css/select2-bootstrap.css">
<script src="/resources/js/select2.min.js"></script>
<script src="/resources/js/headerUserScript.js?20150521"></script>
</c:if>